﻿<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>UAUI</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="icon" type="image/png" href="../assets/images/icon/favicon.png">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="../assets/images/icon/favicon-lg.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="UAUI"/>
<link rel="apple-touch-icon-precomposed" href="../assets/images/icon/favicon-lg.png">
<meta name="msapplication-TileImage" content="../assets/images/icon/favicon-lg.png">
<meta name="msapplication-TileColor" content="#37b">
<link href="../assets/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
<link href="../assets/css/animate.min.css" rel="stylesheet">
<link href="../assets/css/module.css" rel="stylesheet">
<script src="../assets/js/jquery-1.12.4.min.js"></script>
<script src="../assets/js/jquery.SuperSlide.js"></script>
<script src="../assets/js/uaui.js"></script>
<link href="preview.css" rel="stylesheet">
</head>
<body>
	<div class="side doc-side">
		<a class="side-menu-btn" href="javascript:;">
			<i class="fa fa-chevron-circle-left animated fadeInRight"></i>
			<i class="fa fa-chevron-circle-right animated fadeInLeft"></i>
		</a>
		<div class="logo">
			<h1>UAUI</h1>
		</div>
		<div class="user-panel">
			<ul class="rowShow pull-right">
				<li class="show"><a title="显示">显</a></li>
				<li class="hide"><a title="隐藏">隐</a></li>
			</ul>
			<ul class="demo pull-right">
				<li><a href="../demo/index.html" target="_blank" title="演示站点">演</a></li>
			</ul>
			<ul class="set-width">
				<li><a title="600px">小</a></li>
				<li><a title="800px">中</a></li>
				<li><a title="1000px">大</a></li>
				<li><a title="auto">全</a></li>
			</ul>
		</div>
		<div class="side-nav">
			<ul>
				<li class="active">
					<h5>
						<span><i class='fa fa-angle-down'></i></span>
						<a class="a1"><i class="fa fa-list"></i>基础模块</a>
					</h5>
					<ul class="sub-nav">
						<li><a href="#base"><i class="fa fa-circle-o"></i>基础</a></li>
						<li><a href="#grid"><i class="fa fa-circle-o"></i>栅格</a></li>
						<li><a href="#h1"><i class="fa fa-circle-o"></i>标题</a></li>
						<li><a href="#btn"><i class="fa fa-circle-o"></i>按钮</a></li>
						<li><a href="#table"><i class="fa fa-circle-o"></i>表格</a></li>
						<li><a href="#form"><i class="fa fa-circle-o"></i>表单</a></li>
						<li><a href="#icon"><i class="fa fa-circle-o"></i>图标</a></li>
					</ul>
				</li>
				<li>
					<h5>
						<span><i class='fa fa-angle-down'></i></span>
						<a class="a1"><i class="fa fa-list"></i>常用模块</a>
					</h5>
					<ul class="sub-nav">
						<li><a href="#path"><i class="fa fa-circle-o"></i>路径导航</a></li>
						<li><a href="#pager"><i class="fa fa-circle-o"></i>分页</a></li>
						<li><a href="#other-page"><i class="fa fa-circle-o"></i>翻页</a></li>
						<li><a href="#box"><i class="fa fa-circle-o"></i>盒子</a></li>
						<li><a href="#list"><i class="fa fa-circle-o"></i>列表</a></li>
						<li><a href="#article"><i class="fa fa-circle-o"></i>内容</a></li>
						<li><a href="#comment"><i class="fa fa-circle-o"></i>评论</a></li>
						<li><a href="#share"><i class="fa fa-circle-o"></i>分享</a></li>
					</ul>
				</li>
				<li>
					<h5>
						<span><i class='fa fa-angle-down'></i></span>
						<a class="a1"><i class="fa fa-list"></i>JS模块</a>
					</h5>
					<ul class="sub-nav">
						<li><a href="#focus"><i class="fa fa-circle-o"></i>焦点图</a></li>
						<li><a href="#alert"><i class="fa fa-circle-o"></i>警告窗</a></li>
						<li><a href="#modal"><i class="fa fa-circle-o"></i>模态窗</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
	<div class="main doc-main">
		<div class="container">
			<div class="row" id="base">
				<h1 class="doc-hd"><span>基础模块</span></h1>
				<p>所有的模块基于“预置样式”，预置样式尽量保留了元素原有样式特征，预置内容包括字体、字体大小、行高、颜色及部分样式等，将全局 <code>font-size</code> 设置为 <code>14px</code>，<code>line-height</code> 设置为 <code>1.42857</code>。这些属性直接赋予<code>&lt;body&gt;</code>元素和所有段落元素。另外，<code>&lt;p&gt;</code> （段落）元素还设置了 <code>1em</code> 行高（即 14px）的底部外边距（margin）。</p>
				
				<p>斜体[em/i]：<em>斜体</em> <i>斜体</i><br/>
				粗体[strong/b]：<b>粗体</b> <strong>粗体</strong><br/>
				删除线[del/s]：<del>删除线</del> <s>删除线</s><br/>
				下划线[ins/u]：<ins>下划线</ins> <u>下划线</u><br/>
				小号文本[small]：<small>小号文本</small><br/>
				</p>
				代码[pre]：<pre>那时候刚好下着雨，柏油路面湿冷冷的，还闪烁着青、黄、红颜色的灯火。我们就在骑楼下躲雨，看绿色的邮筒孤独地站在街的对面。我白色风衣的大口袋里有一封要寄给南部的母亲的信。樱子说她可以撑伞过去帮我寄信。我默默点头。“谁叫我们只带来一把小伞哪。”她微笑着说，一面撑起伞，准备过马路帮我寄信。从她伞骨渗下来的小雨点，溅在我的眼镜玻璃上。随着一阵拔尖的煞车声，樱子的一生轻轻地飞了起来。缓缓地，飘落在湿冷的街面上，好像一只夜晚的蝴蝶。虽然是春天，好像已是秋深了。</pre>
				<br>
				引用[blockquote]：<blockquote>引用</blockquote>
				
			</div>
			<div class="row" id="grid">
				<h2 class="doc-hd"><span>栅格</span></h2>
				<p>栅格系统依然采用传统布局，方便不同层次技术人员维护更新！</p>
				<div class="doc-example">
					<div class="grid">
						<div class="pull-left" id="side">侧栏</div>
						<div class="pull-right" id="side">侧栏</div>
						<div id="main">主体</div>
					</div>
					<div class="grid">
						<div class="pull-left" id="side">侧栏</div>
						<div id="main">
						<div class="pull-left" id="side">侧栏-1</div>
						<div class="pull-left" id="side">侧栏-2</div>
						<div class="pull-right" id="side">侧栏-3</div>
							<div id="main2">主体</div>
						</div>
					</div>

				</div>
			</div>
			<div class="row" id="h1">
				<h2 class="doc-hd"><span>标题</span></h2>
				HTML中定义的所有标题标签, 从<code>&lt;h1&gt;</code> 到 <code>&lt;h6&gt;</code> 都是可用的。
				<div class="doc-example">
					<h1>h1 标题1 <small>小标题</small></h1>
					<h2>h2 标题2 <small>小标题</small></h2>
					<h3>h3 标题3 <small>小标题</small></h3>
					<h4>h4 标题4 <small>小标题</small></h4>
					<h5>h5 标题5 <small>小标题</small></h5>
					<h6>h6 标题6 <small>小标题</small></h6>
				</div>
			</div>
			<div class="row" id="btn">
				<h2 class="doc-hd"><span>按钮</span></h2>
				<div class="doc-example">
					<div>默认状态：<button class="btn re-btn" type="button">默认样式</button> <a class="btn">默认样式</a></div><br>
					<div>链接状态：<button class="btn re-btn btn-link" type="button">默认样式</button> <a class="btn btn-link">a链接</a></div><br>
					<div>激活状态：<button class="btn re-btn active" type="button">默认样式</button> <a class="btn active">默认样式</a></div><br>
					<div>禁用状态：<button class="btn re-btn disabled" type="button">默认样式</button> <a class="btn disabled">默认样式</a></div><br>
					<div>按钮尺寸：<button class="btn re-btn btn-large" type="button">大按钮</button> <button class="btn" type="button">默认按钮</button> <button class="btn btnSmall" type="button">小按钮</button> <button class="btn btn-mini" type="button">超小按钮</button></div><br>
					<div><span style="float:left;">块级元素：</span><span style="float:left;width:350px"><button class="btn re-btn btn-large btnBlock" type="button">块级按钮</button><a class="btn btn-large btnBlock">块级按钮</a></span></div>
				</div>
			</div>
			<div class="row" id="table">
				<h2 class="doc-hd"><span>表格</span></h2>
				<div class="doc-example">
					<h5>基础效果(添加<code>.table</code>样式)</h5>
					<table class="table" border="0" cellspacing="0" cellpadding="0">
						<thead>
							<tr>
								<th>#</th>
								<th>姓名</th>
								<th>职称</th>
								<th>职务</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>1</td>
								<td>王五</td>
								<td>副教授</td>
								<td>副校长</td>
							</tr>
							<tr>
								<td>2</td>
								<td>王五</td>
								<td>副教授</td>
								<td>副校长</td>
							</tr>
						</tbody>
					</table>
					<h5>带边框的表格<code>.table-border</code></h5>
					<table class="table table-border" border="0" cellspacing="0" cellpadding="0">
						<thead>
							<tr>
								<th>#</th>
								<th>姓名</th>
								<th>职称</th>
								<th>职务</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td rowspan="2" class="tit">1</td>
								<td>张三</td>
								<td>教授</td>
								<td>校长</td>
							</tr>
							<tr>
								<td>李四</td>
								<td>教授</td>
								<td>副校长</td>
							</tr>
							<tr>
								<td class="tit">2</td>
								<td>王五</td>
								<td>副教授</td>
								<td>副校长</td>
							</tr>
							<tr>
								<td class="tit">3</td>
								<td colspan="2">赵六</td>
								<td>副校长</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div class="row" id="form">
				<h2 class="doc-hd"><span>表单</span></h2>
				<div class="doc-example">
					<div class="form-group">
						<ul>
							<li><label for="input-email-3">用户名</label><input type="text" placeholder="用户名"></li>
							<li><label for="input-email-3">密码</label><input type="password" placeholder="密码"></li>
						</ul>
						<div class="submit center">
							<button class="btn re-btn btn-large" type="submit">登录</button>
						</div>
					</div>
				</div>
				<div class="doc-example">
					<div class="form-group form-inline">
						<ul>
							<li><label for="input-email-3">用户名</label><input type="text" placeholder="用户名"></li>
							<li><label for="input-email-3">密码</label><input type="password" placeholder="密码"></li>
						</ul>
						<div class="submit">
							<button class="btn re-btn" type="submit">登录</button>
						</div>
					</div>
				</div>
			</div>
			<div class="row" id="form">
				<h2 class="doc-hd"><span>搜索表单</span></h2>
				<div class="doc-example">
					<div class="input-group">
						<input type="text" size="20" placeholder="请输入搜索关键字"><a class="btn re-btn">搜索</a>
					</div>
				</div>
			</div>
			<div class="row" id="icon">
				<h2 class="doc-hd"><span>图标</span></h2>
				<ul>
					<li><i class="ico-spot"></i>点状图标 </li>
					<li><i class="ico-arrow"></i>箭头图标 </li>
					<li><i class="ico-msg"></i>信件图标 </li>
					<li><i class="ico-pdf"></i>PDF图标</li>
				</ul>
			</div>
			<div class="row" id="default">
				<h1 class="doc-hd"><span>常用模块</span></h1>				
			</div>
			<div class="row" id="path">
				<h2 class="doc-hd"><span>路径导航</span></h2>
				<ul class="path">
					<span>您现在的位置：</span>
					<li><a href="#">首页</a> <span class="divider">></span></li>
					<li><a href="#">新闻中心</a> <span class="divider">></span></li>
					<li>正文</li>
				</ul>
				<ul class="path">
					<li><a href="#">首页</a> <span class="divider">/</span></li>
					<li>新闻中心 <span class="divider">/</span></li>
					<li>正文</li>
				</ul>
			</div>
			<div class="row" id="pager">
				<h2 class="doc-hd"><span>分页</span></h2>
				<div class="pager center">
					<ul>
						<li><a href="#">&lt;</a></li>
						<li><a href="#">1</a></li>
						<li class="active"><a href="#">2</a></li>
						<li><a href="#">3</a></li>
						<li><a href="#">4</a></li>
						<li><a href="#">5</a></li>
						<li><a href="#">&gt;</a></li>
					</ul>
					<ul class="info">
						<li><input type="text" title="输入数字，回车跳转" size="3" onkeydown="" value="1"></li>
						<li class="disabled"><span>共43篇文章/共3页</span></li>
					</ul>
				</div>
			</div>
			<div class="row" id="other-page">
				<h2 class="doc-hd"><span>翻页</span></h2>
				<ul class="other-page">
					<li class="previous">
						<a href="#"><span>上一页：</span>围棋人机大战第3番</a>
					</li>
					<li class="next">
						<a href="#"><span>下一页：</span>李世石再输AlphaGO</a>
					</li>
				</ul>
			</div>
			<div class="row" id="progress">
				<h2 class="doc-hd"><span>进度条</span></h2>
				<div class="progress">
					<div class="bar" style="width:10%;"></div>
				</div>
				<br>
				<div class="progress  progress-striped active">
					<div class="bar" style="width:10%;"></div>
				</div>
				<script type="text/javascript">$(".progress .bar").animate({width:"60%"},300);</script>
			</div>
			<div class="row" id="box">
				<h2 class="doc-hd"><span>盒子</span></h2>
				<div class="box">
					<div class="hd">
						<a href="#" class="more">更多</a>
						<h5><span>标题</span></h5>
					</div>
					<div class="bd">内容</div>
					<div class="ft">脚标</div>
				</div>
			</div>
			<div class="row" id="list">
				<h2 class="doc-hd"><span>列表</span></h2>
				<h4 class="doc-hd">*通用信息列表</h4>
				<ul class="list">
					<li>
						<span class="date">2013-09-18</span>
						<div class="title"><a href="#"><i class="ico-spot"></i>你的旅行，是什么颜色？ 晒照片，换北欧梦幻极光之旅！“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a></div>
					</li>
					<li>
						<span class="date">2013-09-18</span>
						<div class="title"><i class="icon"></i><a href="#">你的旅行，是什么颜色？ 晒照片，换北欧梦幻极光之旅！“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a></div>
					</li>
				</ul>
				<h4 class="doc-hd">*通用信息列表-时间</h4>
				<ul class="list list-multi list-calendar">
					<li>
						<span class="date">2013-09-18</span>
						<div class="title"><a href="#"><i class="ico-spot"></i>国家机关事务管理局局长视察交大东路52号院老旧小区综合整治项目工程国家机关事务管理局局长视察交大东路52号院老旧小区综合整治项目工程国家机关事务管理局局长视察交大东路52号院老旧小区综合整治项目工程国家机关事务管理局局长视察交大东路52号院老旧小区综合整治项目工程！</a></div>
					</li>
					<li>
						<span class="date">2013-09-18</span>
						<div class="title"><i class="icon"></i><a href="#">你的旅行，是什么颜色？ 晒照片，换北欧梦幻极光之旅！“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a></div>
					</li>
				</ul>
				<h4 class="doc-hd">*通用信息列表--多行</h4>
				<ul class="list list-multi">
					<li>
						<span class="date">2013-09-18</span>
						<div class="title"><a href="#"><i class="ico-spot"></i>国家机关事务管理局局长视察交大东路52号院老旧小区综合整治项目工程国家机关事务管理局局长视察交大东路52号院老旧小区综合整治项目工程国家机关事务管理局局长视察交大东路52号院老旧小区综合整治项目工程国家机关事务管理局局长视察交大东路52号院老旧小区综合整治项目工程！</a></div>
					</li>
					<li>
						<span class="date">2013-09-18</span>
						<div class="title"><i class="icon"></i><a href="#">你的旅行，是什么颜色？ 晒照片，换北欧梦幻极光之旅！“你的旅行，是什么颜色？” 晒照片，换北欧梦幻极光之旅！是什么颜色？” 晒照片，换北欧梦幻极光之旅！</a></div>
					</li>
				</ul>
				<h4 class="doc-hd">*通用信息列表带简介</h4>
				<ul class="list list-intro">
					<li class="t">
						<div class="title"><a href=""><i class="ico-spot"></i>我很囧，你保重晒晒旅行中的那些囧！</a></div>
						<div class="intro">囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！</div>
					</li>
					<li class="t">
						<div class="pic"><a href="#"><img style="width:120px;" alt="我很囧，你保重....晒晒旅行中的那些囧！" src="../assets/images/p1.jpg"></a></div>
						<div class="con">
							<div class="title"><a href="">有机会获得此书本活动进行3个月，每月送出三本书</a></div>
							<div class="intro">囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！</div>
						</div>
					</li>
					<li class="t">
						<div class="title"><a href="">囧人囧事囧照，人在囧途，越囧越萌！</a></div>
						<div class="con">
							<div class="pic"><a href="#"><img style="width:120px;" alt="我很囧，你保重....晒晒旅行中的那些囧！" src="../assets/images/p1.jpg"></a></div>
							<div class="intro">囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！</div>
						</div>
					</li>
					<li class="t">
						<div class="pic"><a href="#"><img style="width:180px;" alt="我很囧，你保重....晒晒旅行中的那些囧！" src="../assets/images/p2.jpg"></a></div>
						<div class="con">
							<div class="title"><a href="">囧人囧事囧照，人在囧途，越囧越萌！</a></div>
							<div class="intro">囧人囧事囧照，人在囧途，越囧越萌。标记《带你出发，陪我回家》为“想读”“在读”或“读过”，有机会获得此书本活动进行3个月，每月送出三本书。会有不定期bonus！</div>
						</div>
					</li>
				</ul>
				<h4 class="doc-hd">*头条图文信息列表</h4>
				<ul class="list list-intro">
					<li class="t topic topic1">
						<div class="con">
							<div class="title center"><h4><a href="">传今年新款iPhone配5.8英寸AMOLED屏及弧面玻璃</a></h4></div>
							<div class="intro">郭明錤表示，苹果选择玻璃材料是由于，这种材料易于制造为不同的形状，同时可以带来轻薄的设计。郭明錤表示，苹果选择玻璃材料是由于，这种材料易于制造为不同的形状，同时可以带来轻薄的设计... <a href="" class="more">[详细]</a></div>
						</div>
					</li>
					<li class="n">
						<span class="date">2013-09-18</span>
						<div class="title"><a href="#"><i class="icon"></i>郭明錤表示，苹果选择玻璃材料是由于，这种材料易于制造为不同的形状，同时可以带来轻薄的设计。郭明錤表示，苹果选择玻璃材料是由于，这种材料易于制造为不同的形状，同时可以带来轻薄的设计。</a></div>
					</li>
					<li class="n">
						<span class="date">2013-09-18</span>
						<div class="title"><a href="#"><i class="icon"></i>圆通董事长喻渭蛟：估值175亿争快递第一股</a></div>
					</li>
				</ul>
				<h4 class="doc-hd">*图片信息列表</h4>
				<ul class="list list-shadow list-pic">
					<li>
						<div class="pic"><a href="#"><img alt="我很囧，你保重....晒晒旅行中的那些囧！" src="../assets/images/p1.jpg"></a></div>
						<div class="title"><a href="">谷歌Facebook空中互联网计划遇阻领空不让飞不让飞不让飞不让飞不让飞</a></div>
					</li>
					<li>
						<div class="pic"><a href="#"><img alt="我很囧，你保重....晒晒旅行中的那些囧！" src="../assets/images/p2.jpg"></a></div>
						<div class="title"><a href="">传谷歌将在Android手机中整合增强现实功能</a></div>
					</li>
					<li>
						<div class="pic"><a href="#"><img alt="我很囧，你保重....晒晒旅行中的那些囧！" src="../assets/images/p4.jpg"></a></div>
						<div class="title"><a href="">连续创业后的雕爷：梦想改变世界</a></div>
					</li>
					<li>
						<div class="pic"><a href="#"><img alt="我很囧，你保重....晒晒旅行中的那些囧！" src="../assets/images/p3.jpg"></a></div>
						<div class="title"><a href="">机器人专家：无人驾驶汽车尚未做好普及准备</a></div>
					</li>
					<li>
						<div class="pic"><a href="#"><img alt="我很囧，你保重....晒晒旅行中的那些囧！" src="../assets/images/p1.jpg"></a></div>
						<div class="title"><a href="">微软“超大号”Surface开售：起价8999美元</a></div>
					</li>
					<li>
						<div class="pic"><a href="#"><img alt="我很囧，你保重....晒晒旅行中的那些囧！" src="../assets/images/p4.jpg"></a></div>
						<div class="title"><a href="">印度电商蓬勃发展国际巨头争相角逐</a></div>
					</li>
				</ul>
			</div>
			<div class="row" id="article">
				<h2 class="doc-hd"><span>内容</span></h2>
				<article class="article">
					<div class="article-hd">
						<h1 class="title center">永远的蝴蝶</h1>
						<h4 class="subTitle center">那时候刚好下着雨，柏油路面湿冷冷的，还闪烁着青、黄、红颜色的灯火。</h4>
						<div class="meta center">
							<span>文章来源：互联网</span>
							<span>作者：佚名</span>
							<span>发布时间：2015-10-10</span>
							<span>点击数：10 次</span>
							<span class="font-zoom">[字号：<a rel="14">小</a> <a rel="18">中</a> <a rel="22">大</a></a>]</span>
						</div>
						<p class="meta">陈启佑（台湾）</p>
						<p class="lead">《永远的蝴蝶》是台湾著名作家陈启佑先生的一篇小小说。这是一篇散文化的微型小说，其语言具有较强的抒情色彩，立意含蓄隽永 。作品情节很简单，写的是一个凄美的爱情故事。在一个雨天，“我”的恋人樱子自愿帮“我”到马路对面去寄信。随着一阵拔尖的刹车声，樱子年轻的生命消逝了。</p>
					</div>
					<div class="article-bd">
						<div id="font-zoom">
							<h3>《永远的蝴蝶》原文</h3>
							<p>那时候刚好下着雨，柏油路面湿冷冷的，还闪烁着青、黄、红颜色的灯火。我们就在骑楼下躲雨，看绿色的邮筒孤独地站在街的对面。我白色风衣的大口袋里有一封要寄给南部的母亲的信。樱子说她可以撑伞过去帮我寄信。我默默点头。</p>
							<p>“谁叫我们只带来一把小伞哪。”她微笑着说，一面撑起伞，准备过马路帮我寄信。从她伞骨渗下来的小雨点，溅在我的眼镜玻璃上。</p>
							<p>随着一阵拔尖的煞车声，樱子的一生轻轻地飞了起来。缓缓地，飘落在湿冷的街面上，好像一只夜晚的蝴蝶。</p>
							<p>虽然是春天，好像已是秋深了。</p>
							<p>她只是过马路去帮我寄信。这简单的行动，却要叫我终身难忘了。我缓缓睁开眼，茫然站在骑楼下，眼里裹着滚烫的泪水。世上所有的车子都停了下来，人潮涌向马路中央。没有人知道那躺在街面的，就是我的，蝴蝶。这时她只离我五公尺，竟是那么遥远。更大的雨点溅在我的眼镜上，溅到我的生命里来。</p>
							<p>为什么呢？只带一把雨伞？</p>
							<p>然而我又看到樱子穿着白色的风衣，撑着伞，静静地过马路了。她是要帮我寄信的。那，那是一封写给南部母亲的信。我茫然站在骑楼下，我又看到永远的樱子走到街心。其实雨下得并不大，却是一生一世中最大的一场雨。而那封信是这样写的，年轻的樱子知不知道呢？</p>
							<blockquote>妈：我打算在下个月和樱子结婚。</blockquote>
							<ul>
								<li>那时候刚好下着雨</li>
								<li>柏油路面湿冷冷的</li>
								<li>还闪烁着青、黄、红颜色的灯火</li>
							</ul>
							<hr class="article-divider">
							<h3>作者简介</h3>
							<p>《永远的蝴蝶》作者陈启佑，笔名渡也、江山之助，台湾省嘉义市人，中国文化大学中国文学博士，曾任教于嘉义农专、台湾教育学院。</p>
							<hr class="article-divider">
							<h3>Seminar of New Teaching Program</h3>
							<p>The opening ceremony was hosted by Prof. Bao Guoxian, dean of LUSM. Li Hengbin, deputy Party Secretary of Lanzhou University attended the ceremony and made a speech. He passed his sincere congratulations to the smooth convening of this seminar, expressed his warmlest welcome to the distinguished guests and delegations, and he also introduced the current situation of MBA education in Lanzhou University.</p>
							<h4>Newly Added MBA Colleges and Universities held in Lanzhou Univer</h4>
							<p>This seminar has a great influence on deepening the understanding of the new teaching program for newly added MBA colleges and universities, and promoting the MBA course construction and teaching management level at the same time.</p>
						</div>
					</div>
				</article>
			</div>
			<div class="row" id="comment">
				<h2 class="doc-hd"><span>评论</span></h2>
				<div class="write-msg">
					<div class="msg-content">
						<textarea wrap="on" id="comment-contnet" placeholder="发表点什么"></textarea>
					</div>
					<div class="msg-user">
						<div class="msg-name">
						<label id="comment-username-block"><span>用户名：</span><input type="text" id="commentUsername" placeholder="用户名" class="input-txt" size="8"></label></div>
						<div class="msg-email">
						<label id="comment-email-block"><span>邮箱：</span><input type="text" id="commentEmail" placeholder="邮箱" class="input-txt" size="8"></label></div>
						<span class="msg-code"><span>验证码：</span><input type="text" maxlength="6" placeholder="验证码" value="" id="comment-valid-code" size="6" onfocus="this.select();" class="input-txt">
						<img align="absmiddle" title="看不清楚，换一个" id="comment-valid-code-img" onclick="refreshValidCode(this);" src="../assets/images/share/validateCodeImage.aspx.gif" style="border: medium none ; cursor: pointer;vertical-align: middle;"></span>
						<span class="star" id="comment-ranking-block">
						评分：
						<input type="image" src="../assets/images/share/fstar.gif" alt="星级1" onmousedown="rankingClick(1)" onmouseover="rankingMouseOver(1)" onmouseout="rankingMouseOut()"><input type="image" src="../assets/images/share/fstar.gif" alt="星级2" onmousedown="rankingClick(2)" onmouseover="rankingMouseOver(2)" onmouseout="rankingMouseOut()"><input type="image" src="../assets/images/share/fstar.gif" alt="星级3" onmousedown="rankingClick(3)" onmouseover="rankingMouseOver(3)" onmouseout="rankingMouseOut()"><input type="image" src="../assets/images/share/estar.gif" alt="星级4" onmousedown="rankingClick(4)" onmouseover="rankingMouseOver(4)" onmouseout="rankingMouseOut()"><input type="image" src="../assets/images/share/estar.gif" alt="星级5" onmousedown="rankingClick(5)" onmouseover="rankingMouseOver(5)" onmouseout="rankingMouseOut()"></span>
					</div>
					<div class="msg-btn"><a class="btn re-btn" href="javascript:addComment()"><span>发表评论</span></a></div>
				</div>
				<ul class="comment">
					<li>
						<div class="pic"><a href="#"><img src="../assets/images/p1.jpg" alt="头像"/></a></div>
						<div class="con">
							<div class="comment-hd">
								<span class="star"><em>评分：</em><em class="stars"><i style="width:50%;"></i></em></span>
								<span class="comment-author"><b>小手机</b> [iPhone SE]</span> <time datetime="2013-07-27T04:54:29-07:00" title="2013年7月27日 下午7:54 格林尼治标准时间+0800">2014-7-12 15:30</time>
							</div>
							<div class="comment-bd">我茫然站在骑楼下，我又看到永远的樱子走到街心。其实雨下得并不大，却是一生一世中最大的一场雨。而那封信是这样写的，年轻的樱子知不知道呢？</div>
							<div class="comment-reply">
								<div class="reply-hd">
									<span class="comment-author"><b>管理回复</b></span> <time datetime="2013-07-27T04:54:29-07:00" title="2013年7月27日 下午7:54 格林尼治标准时间+0800">2014-7-12 15:30</time>
								</div>
								<div class="reply-bd">中越都处于发展的关键阶段，双方要从战略高度和长远角度出发，在发展中越关系十六字方针和“四好”精神指引下，坚定不移推进中越友好。</div>
							</div>
						</div>
					</li>
					<li>
						<div class="pic"><a href="#"><img src="../assets/images/p2.jpg" alt="头像"/></a></div>
						<div class="con">
							<div class="comment-hd">
								<span class="star"><em>评分：</em><em class="stars"><i style="width:100%;"></i></em></span>
								<span class="comment-author"><b>田田_酱</b> [gshsfdh]</span> <time datetime="2013-07-27T04:54:29-07:00" title="2013年7月27日 下午7:54 格林尼治标准时间+0800">2014-7-12 15:30</time>
							</div>
							<div class="comment-bd"><p>戴尔IT服务部门的前身为Perot Systems，是戴尔在2009年以39亿美元收购的，主要为医院和政府部门提供技术咨询服务。作为戴尔的非核心业务，出售IT服务部门能帮助公司削减400多亿美元债务中的一部分，从而缓解收购数据存储提供商EMC带来的沉重债务负担。</p><p>戴尔2015年10月宣布，将以约670亿美元收购数据存储厂商EMC，这是全球科技市场最大规模的一笔并购交易。交易完成后，戴尔将背负495亿美元的巨额债务。去年11月就有消息称，戴尔计划出售约100亿美元的非核心资产，包括软件和服务。</p></div>
						</div>
					</li>
					<li>
						<div class="pic"><a href="#"><img src="../assets/images/p3.jpg" alt="头像"/></a></div>
						<div class="con">
							<div class="comment-hd">
								<span class="star"><em>评分：</em><em class="stars"><i style="width:100%;"></i></em></span>
								<span class="comment-author"><b>杜杜鹅</b> [乌鲁木齐之恋]</span> <time datetime="2013-07-27T04:54:29-07:00" title="2013年7月27日 下午7:54 格林尼治标准时间+0800">2014-7-12 15:30</time>
							</div>
							<div class="quote">admin： 戴尔在2009年以39亿美元收购的，主要为医院和政府部门提供技术咨询服务。</div>
							<div class="comment-bd">那是一封写给南部母亲的信。我茫然站在骑楼下，我又看到永远的樱子走到街心。其实雨下得并不大，却是一生一世中最大的一场雨。而那封信是这样写的，年轻的樱子知不知道呢？</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="row" id="share">
				<h2 class="doc-hd"><span>分享</span></h2>
				<div class="bdsharebuttonbox"><a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone"></a><a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina"></a><a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin"></a><a title="分享到腾讯微博" href="#" class="bds_tqq" data-cmd="tqq"></a><a title="分享到QQ好友" href="#" class="bds_sqq" data-cmd="sqq"></a><a title="分享到百度新首页" href="#" class="bds_bdhome" data-cmd="bdhome"></a><a title="分享到腾讯朋友" href="#" class="bds_tqf" data-cmd="tqf"></a><a title="分享到人人网" href="#" class="bds_renren" data-cmd="renren"></a><a title="分享到点点网" href="#" class="bds_diandian" data-cmd="diandian"></a><a title="分享到有道云笔记" href="#" class="bds_youdao" data-cmd="youdao"></a><a title="分享到复制网址" href="#" class="bds_copy" data-cmd="copy"></a><a href="#" class="bds_more" data-cmd="more"></a></div><script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"32"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
			</div>
			<div class="row" id="js">				
				<h1 class="doc-hd"><span>JS模块</span></h1>
				<p>JS模块支持superSilde.js全部特效，另外部分引用bootstrp2.0.js , Waypoints.js ,Cookie.js 加以整合，支持警告窗口、弹窗、滚动监听、缓存等</p>
			</div>
			<div class="row" id="focus">
				<h2 class="doc-hd"><span>焦点图</span></h2>
				<div class="box-loop">
					<div class="box">
						<div class="focus">
							<div class="focus-hd">
								<ul>
									<li class="li1"><span>1</span></li>
									<li class="li2"><span>2</span></li>
									<li class="li3"><span>3</span></li>
									<li class="li4"><span>4</span></li>
								</ul>
							</div>
							<div class="focus-bd">
								<ul>
									<li>
										<div class="pic"><a href="#"><img src="../assets/images/p1.jpg"></a></div>
										<div class="con">
											<div class="title"><a href="#">国家机关事务管理局局长视察交大东路52号院老旧小区综合整治项目工程全国爱卫会召开电视电话会议部署“清洁家园 灭蚊防病”春季爱国卫生运动</a></div>
											<div class="bg"></div>
										</div>
									</li>
									<li>
										<div class="pic"><a href="#"><img src="../assets/images/p2.jpg"></a></div>
										<div class="con">
											<div class="title"><a href="#">罗新：“丝绸之路”的历史不能被浪漫化</a></div>
											<div class="bg"></div>
										</div>
									</li>
									<li>
										<div class="pic"><a href="#"><img src="../assets/images/p3.jpg"></a></div>
										<div class="con">
											<div class="title"><a href="#">今天起一大批新规开始施行 全都和你息息相关！</a></div>
											<div class="bg"></div>
										</div>
									</li>
									<li>
										<div class="pic"><a href="#"><img src="../assets/images/p4.jpg"></a></div>
										<div class="con">
											<div class="title"><a href="#">组织师生党员参观八路军驻兰州办事处纪念馆</a></div>
											<div class="bg"></div>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="box">
						<div class="focus focus-icon">
							<div class="focus-hd">
								<ul>
									<li class="li1"><span>1</span></li>
									<li class="li2"><span>2</span></li>
									<li class="li3"><span>3</span></li>
									<li class="li4"><span>4</span></li>
								</ul>
							</div>
							<div class="focus-bd">
								<ul>
									<li>
										<div class="pic"><a href="#"><img src="../assets/images/p2.jpg"></a></div>
										<div class="con">
											<div class="title"><a href="#">都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花</a></div>
											<div class="bg"></div>
										</div>
									</li>
									<li>
										<div class="pic"><a href="#"><img src="../assets/images/p1.jpg"></a></div>
										<div class="con">
											<div class="title"><a href="#">微信提现今起开收手续费 每人1000元免费额度</a></div>
											<div class="bg"></div>
										</div>
									</li>
									<li>
										<div class="pic"><a href="#"><img src="../assets/images/p4.jpg"></a></div>
										<div class="con">
											<div class="title"><a href="#">组织师生党员参观八路军驻兰州办事处纪念馆</a></div>
											<div class="bg"></div>
										</div>
									</li>
									<li>
										<div class="pic"><a href="#"><img src="../assets/images/p3.jpg"></a></div>
										<div class="con">
											<div class="title"><a href="#">今天起一大批新规开始施行 全都和你息息相关！</a></div>
											<div class="bg"></div>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="box">
						<div class="focus focus-ad">
							<div class="focus-hd">
								<ul>
									<li class="li1"><span>1</span></li>
									<li class="li2"><span>2</span></li>
									<li class="li3"><span>3</span></li>
									<li class="li4"><span>4</span></li>
								</ul>
							</div>
							<div class="focus-bd">
								<ul>
									<li>
										<div class="pic"><a href="#"><img src="../assets/images/p3.jpg"></a></div>
										<div class="con">
											<div class="title"><a href="#">都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花</a></div>
											<div class="bg"></div>
										</div>
									</li>
									<li>
										<div class="pic"><a href="#"><img src="../assets/images/p4.jpg"></a></div>
										<div class="con">
											<div class="title"><a href="#">今天起一大批新规开始施行 全都和你息息相关！</a></div>
											<div class="bg"></div>
										</div>
									</li>
									<li>
										<div class="pic"><a href="#"><img src="../assets/images/p2.jpg"></a></div>
										<div class="con">
											<div class="title"><a href="#">都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花</a></div>
											<div class="bg"></div>
										</div>
									</li>
									<li>
										<div class="pic"><a href="#"><img src="../assets/images/p1.jpg"></a></div>
										<div class="con">
											<div class="title"><a href="#">都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花</a></div>
											<div class="bg"></div>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="box">
						<div class="focus focus-pic">
							<div class="focus-hd">
								<ul>
									<li class="li1" title="都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花">
										<div class="pic"><img src="../assets/images/p4.jpg"></div>
										<div class="title"><a>今天起一大批新规开始施行 全都和你息息相关！</a></div>
									</li>
									<li class="li2" title="都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花">
										<div class="pic"><img src="../assets/images/p2.jpg"></div>
										<div class="title"><a>都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花</a></div>
									</li>
									<li class="li3" title="都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花">
										<div class="pic"><img src="../assets/images/p1.jpg"></div>
										<div class="title"><a>都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花</a></div>
									</li>
									<li class="li4" title="都斛椰菜花">
										<div class="pic"><img src="../assets/images/p3.jpg"></div>
										<div class="title"><a>都斛椰菜花</a></div>
									</li>
								</ul>
							</div>
							<div class="focus-bd">
								<ul>
									<li>
										<div class="pic"><a href="#"><img src="../assets/images/p4.jpg"></a></div>
										<div class="con">
											<div class="title"><a href="#">今天起一大批新规开始施行 全都和你息息相关！</a></div>
											<div class="bg"></div>
										</div>
									</li>
									<li>
										<div class="pic"><a href="#"><img src="../assets/images/p3.jpg"></a></div>
										<div class="con">
											<div class="title"><a href="#">索尼新专利：用手套控制虚拟现实设备</a></div>
											<div class="bg"></div>
										</div>
									</li>
									<li>
										<div class="pic"><a href="#"><img src="../assets/images/p1.jpg"></a></div>
										<div class="con">
											<div class="title"><a href="#">传特斯拉再挖苹果高管：或设计自主处理器</a></div>
											<div class="bg"></div>
										</div>
									</li>
									<li>
										<div class="pic"><a href="#"><img src="../assets/images/p2.jpg"></a></div>
										<div class="con">
											<div class="title"><a href="#">民营快递企业扎堆上市背后 行业痛点待解</a></div>
											<div class="bg"></div>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="box">
						<div class="focus focus-pic-tit">
							<div class="focus-hd">
								<ul>
									<li class="li1" title="都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花">
										<div class="pic"><img src="../assets/images/p4.jpg"></div>
										<div class="title"><a>今天起一大批新规开始施行</a></div>
									</li>
									<li class="li2" title="都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花">
										<div class="pic"><img src="../assets/images/p2.jpg"></div>
										<div class="title"><a>今天起一大批新规开始施行</a></div>
									</li>
									<li class="li3" title="都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花都斛椰菜花">
										<div class="pic"><img src="../assets/images/p1.jpg"></div>
										<div class="title"><a>今天起一大批新规开始施行</a></div>
									</li>
									<li class="li4" title="都斛椰菜花">
										<div class="pic"><img src="../assets/images/p3.jpg"></div>
										<div class="title"><a>今天起一大批新规开始施行</a></div>
									</li>
								</ul>
							</div>
							<div class="focus-bd">
								<ul>
									<li>
										<div class="pic"><a href="#"><img src="../assets/images/p4.jpg"></a></div>
										<div class="con">
											<div class="title"><a href="#">今天起一大批新规开始施行 全都和你息息相关！</a></div>
											<div class="bg"></div>
										</div>
									</li>
									<li>
										<div class="pic"><a href="#"><img src="../assets/images/p3.jpg"></a></div>
										<div class="con">
											<div class="title"><a href="#">索尼新专利：用手套控制虚拟现实设备</a></div>
											<div class="bg"></div>
										</div>
									</li>
									<li>
										<div class="pic"><a href="#"><img src="../assets/images/p1.jpg"></a></div>
										<div class="con">
											<div class="title"><a href="#">传特斯拉再挖苹果高管：或设计自主处理器</a></div>
											<div class="bg"></div>
										</div>
									</li>
									<li>
										<div class="pic"><a href="#"><img src="../assets/images/p2.jpg"></a></div>
										<div class="con">
											<div class="title"><a href="#">民营快递企业扎堆上市背后 行业痛点待解</a></div>
											<div class="bg"></div>
										</div>
									</li>
								</ul>
							</div>
						</div>
						<script type="text/javascript">jQuery(".focus").slide({titCell:".focus-hd li",mainCell:".focus-bd ul",effect:"left",vis:"auto",autoPlay:true});</script>
					</div>
				</div>
			</div>
			<div class="row" id="alert">
				<h2 class="doc-hd"><span>警告窗</span></h2>
				<div class="alert">
					<button type="button" class="close" data-dismiss="alert">&times;</button>
					<strong>注：</strong> 这是一个可以关闭的警告框！
				</div>
			</div>
			<div class="row" id="modal">
				<h2 class="doc-hd"><span>模态窗口</span></h2>
				<a class="btn re-btn" data-toggle="modal" data-target="#m1">查看演示案例</a>
				<a class="btn" data-toggle="modal" data-target="#m2">查看演示案例2</a>
				<div id="m1" class="modal">
					<div class="modal-hd">
						<button type="button" class="close" data-dismiss="modal">×</button>
						<h3 class="center">号外号外</h3>
					</div>
					<div class="modal-bd">
						<p>新鲜出炉的大包子！</p>
					</div>
				</div>
				<div id="m2" class="modal">
					<div class="modal-hd">
						<button type="button" class="close" data-dismiss="modal">×</button>
						<h3 class="center">号外</h3>
					</div>
					<div class="modal-bd">
						<p>大包子新鲜出炉咯！</p>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<div class="bg-txt">
		<h1>UAUI轻型前端框架</h1>
		<p>基于bootstarp为网站项目而立，适用于各类型网站！</p>
	</div>
</body>
</html>
<!-- 内容页引用样式 -->
<script src="../assets/js/font-zoom.js"></script>
<!-- preview 引用文件 -->
<link href="jquery.mCustomScrollbar.min.css" rel="stylesheet">
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script src="preview.js"></script>